# Config [Define global metadata for your documentation]

Vocs uses a [configuration file (`vocs.config.ts`)](/docs/structure#configuration-file) to define global metadata for your documentation. This includes things like the site title, description, logo, sidebar, and more for your project. 

## Initialize Config File

The Vocs config can be defined in a `vocs.config.ts` file at the root of your project.

:::code-group

```md [Directory Structure]
viem/
├── docs/
├── node_modules/
├── src/
├── package.json
└── vocs.config.ts # [!code ++]
```

```ts [vocs.config.ts] twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  title: 'Viem'
})
```

:::

## Parameters

### aiCta

- **Type:** `boolean | { query: ((p: { location: string }) => string) }`
- **Default:** `true`

Whether or not to show the AI call-to-action dropdown (ie. "Open in ChatGPT").

```ts twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  aiCta: false, // [!code focus]
  title: 'Viem'
})
```

You can also specify a custom query for the AI.

```ts twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  aiCta: {  // [!code focus]
    query({ location }) { // [!code focus]
      return `Please research and analyze this page: ${location} so I can ask you questions about it.` // [!code focus]
    } // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

### banner

- **Type:** `Banner`

Configuration for the banner fixed to the top of the page.

Can be a Markdown string, a React Element, or an object with the following properties:
- `dismissable`: Whether or not the banner can be dismissed.
- `backgroundColor`: The background color of the banner.
- `content`: The content of the banner.
- `height`: The height of the banner.
- `textColor`: The text color of the banner.

:::tip
When using JSX, remember to rename the config file extension to `.tsx` or `.jsx`.
:::

```ts twoslash
import { defineConfig } from 'vocs'

// @log:   ↓ as Markdown
export default defineConfig({
  banner: 'Head to our new [Discord](https://discord.gg/JUrRkGweXV)!', // [!code focus]
  title: 'Viem'
})
```

```tsx twoslash
// @noErrors
import { defineConfig } from 'vocs'

// @log:   ↓ as a React Element
export default defineConfig({
  banner: <div>Head to our new <a href="https://discord.gg/JUrRkGweXV">Discord</a></div>, // [!code focus]
  title: 'Viem'
})
```

```ts twoslash
import { defineConfig } from 'vocs'

// @log:   ↓ as an object
export default defineConfig({
  banner: { // [!code focus]
    dismissable: false, // [!code focus]
    backgroundColor: 'red', // [!code focus]
    content: 'Head to our new [Discord](https://discord.gg/JUrRkGweXV)!', // [!code focus]
    height: '28px', // [!code focus]
    textColor: 'white', // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

### basePath

- **Type:** `string`

The base path the documentation will be deployed at. All assets & pages will be prefixed with this path.

For example, this is useful for deploying to GitHub Pages. 
If the target URL is `https://example.github.io/foo`, then the `basePath` should be set to `/foo`.

```ts twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  basePath: '/docs', // [!code focus]
})
```

### baseUrl

- **Type:** `string`

The base URL for your documentation. This is used to populate the `<base>` tag in the `<head>` of the page, 
and is used to form the `%logo` variable for dynamic OG images.

```ts twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  baseUrl: 'https://vocs.dev', // [!code focus]
})
```

### blogDir

- **Type:** `string`
- **Default:** `"./pages/blog"`

Path to blog pages relative to project root. Used to extract posts from the filesystem.

```ts twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  blogDir: './pages/writings', // [!code focus]
  title: 'Viem'
})
```

### checkDeadlinks

- **Type:** `boolean | "warn"`
- **Default:** `true`

Whether or not to check for dead links in the documentation.

```ts twoslash
import { defineConfig } from 'vocs'

// Disable dead link checking
export default defineConfig({
  checkDeadlinks: false, // [!code focus]
  title: 'Viem'
})
```

You can also set it to `"warn"` to only warn about dead links instead of throwing errors during build.

```ts twoslash
import { defineConfig } from 'vocs'

// Warn about dead links instead of erroring
export default defineConfig({
  checkDeadlinks: 'warn', // [!code focus]
  title: 'Viem'
})
```

### description

- **Type:** `string`

General description for the documentation.

```ts twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  description: 'Build reliable apps & libraries with lightweight, composable, and type-safe modules that interface with Ethereum.', // [!code focus]
  title: 'Viem'
})
```

### editLink

- **Type:** `EditLink`

Edit location for the documentation.

```ts twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  editLink: { // [!code focus]
    pattern: 'https://github.com/wevm/viem/edit/main/site/pages/:path', // [!code focus]
    text: 'Edit on GitHub' // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

#### editLink.pattern

- **Type:** `string | ((pageData: PageData) => string)`

Edit link pattern. Can be a string with `:path` placeholder, or a function that receives a `PageData` object and returns the edit URL.

```ts twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  editLink: { // [!code focus]
    pattern: 'https://github.com/wevm/viem/edit/main/site/pages/:path' // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

```ts twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  editLink: { // [!code focus]
    pattern: (pageData) => { // [!code focus]
      if (pageData.filePath?.startsWith('foo/')) // [!code focus]
        return `https://github.com/wevm/vocs/edit/main/src/pages/foo/${pageData.filePath}` // [!code focus]
      return `https://github.com/wevm/vocs/edit/main/src/pages/${pageData.filePath}` // [!code focus]
    }, // [!code focus]
    text: 'Edit on Github' // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

#### editLink.text

- **Type:** `string`

Edit link text.

```ts twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  editLink: { // [!code focus]
    pattern: 'https://github.com/wevm/viem/edit/main/site/pages/:path', 
    text: 'Edit on GitHub' // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

### font

- **Type:** `{ google: string }`

Base font face.

:::warning
Only Google Fonts are supported at the moment.
:::

```ts twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  font: { // [!code focus]
    google: 'Inter' // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

You can also define the font family for inline code & code blocks:

```ts twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  font: { 
    default: { 
      google: 'Inter', 
    }, 
    mono: { // [!code focus]
      google: 'Dancing Script', // [!code focus]
    }, // [!code focus]
  },
  title: 'Viem'
})
```

### head

- **Type:** `ReactElement | { [path: string]: ReactElement } | ({ path: string }) => ReactElement)`

Additional tags to include in the `<head>` tag of the page HTML.

:::tip
When using JSX, remember to rename the config file extension to `.tsx` or `.jsx`.
:::

#### Element

```tsx twoslash
// @noErrors
import * as React from 'react'
import { defineConfig } from 'vocs'

export default defineConfig({
  head: ( // [!code focus]
    <> {/* [!code focus] */}
      <meta property="og:type" content="website" /> {/* [!code focus] */}
      <meta property="og:title" content="viem · TypeScript Interface for Ethereum" /> {/* [!code focus] */}
      <meta property="og:image" content="https://viem.sh/og-image.png" /> {/* [!code focus] */}
      <meta property="og:url" content="https://viem.sh" /> {/* [!code focus] */}
      <meta property="og:description" content="Build reliable Ethereum apps & libraries with lightweight, composable, & type-safe modules from viem." /> {/* [!code focus] */}
    </> // [!code focus]
  ), // [!code focus]
  title: 'Viem'
})
```

#### Path → Element Object 

You can specify a `path` → `ReactElement` object for the `head` with paths as keys.

```tsx twoslash
// @noErrors
import * as React from 'react'
import { defineConfig } from 'vocs'

export default defineConfig({
  head: { // [!code focus]
    '/': /* ... */, // [!code focus]
    '/docs': /* ... */, // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

#### Function

You can specify a function that returns a `ReactElement`. Useful if you want to have more dynamic control over rendering head tags.

```tsx twoslash
// @noErrors
import * as React from 'react'
import { defineConfig } from 'vocs'

export default defineConfig({
  head({ path }) { // [!code focus]
    if (path === '/docs') return /* ... */ // [!code focus]
    return /* ... */ // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

:::tip[Tip]
The `head` function can also be `async`.
:::

### iconUrl

- **Type:** `string | { light: string; dark: string }`

Icon URL. Used as the website's favicon.

:::info[Note]
Assets need to be placed in the `public` directory.
:::

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  iconUrl: '/icon.svg', // [!code focus]
  title: 'Viem'
})
```

You can also specify icons for light and dark mode.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  iconUrl: { // [!code focus]
    light: '/icon-light.svg', // [!code focus]
    dark: '/icon-dark.svg' // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

### logoUrl

- **Type:** `string | { light: string; dark: string }`

Logo URL. Used for the sidebar and mobile top nav header image.

:::info[Note]
Assets need to be placed in the `public` directory.
:::

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  logoUrl: '/logo.svg', // [!code focus]
  title: 'Viem'
})
```

You can also specify logos for light and dark mode.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  logoUrl: { // [!code focus]
    light: '/logo-light.svg', // [!code focus]
    dark: '/logo-dark.svg' // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

### markdown

- **Type:** `Markdown`

Markdown configuration.

#### markdown.code

- **Type:** `{ theme: { light: string; dark: string } }`

Used to configure the syntax highlighting theme of code blocks.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  markdown: { // [!code focus]
    code: { // [!code focus]
      themes: { // [!code focus]
        light: 'github-light', // [!code focus]
        dark: 'github-dark' // [!code focus]
      } // [!code focus]
    } // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

::::note
:::details[Available Built-in Themes]
```ts
"aurora-x" 
"catppuccin-frappe" 
"catppuccin-latte" "catppuccin-macchiato"
"catppuccin-mocha"
"dark-plus"
"dracula"
"dracula-soft"
"github-dark"
"github-dark-dimmed"
"github-light"
"light-plus"
"material-theme"
"material-theme-darker"
"material-theme-lighter"
"material-theme-ocean"
"material-theme-palenight"
"min-dark"
"min-light"
"monokai"
"nord"
"one-dark-pro"
"poimandres"
"red"
"rose-pine"
"rose-pine-dawn"
"rose-pine-moon"
"slack-dark"
"slack-ochin"
"solarized-dark"
"solarized-light"
"vitesse-black"
"vitesse-dark"
"vitesse-light"
```
:::
::::

#### markdown.remarkPlugins

- **Type:** `PluggableList`

Used to configure the remark plugins used to transform Markdown.

[See list of plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins)

```tsx twoslash
// @noErrors
import { defineConfig } from 'vocs'
import remarkMath from 'remark-math' // [!code focus]

export default defineConfig({
  markdown: { // [!code focus]
    remarkPlugins: [ // [!code focus]
      remarkMath // [!code focus]
    ] // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

#### markdown.rehypePlugins

- **Type:** `PluggableList`

Used to configure the rehype plugins used to transform generated HTML from Markdown.

[See list of plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md)

```tsx twoslash
// @noErrors
import { defineConfig } from 'vocs'
import rehypeSlots from 'rehype-slots' // [!code focus]

export default defineConfig({
  markdown: { // [!code focus]
    rehypePlugins: [ // [!code focus]
      rehypeSlots // [!code focus]
    ] // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

### ogImageUrl

- **Type:** `string | { [path: string]: string }`

OG Image URL. `null` to disable.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  ogImageUrl: 'https://vocs.dev/api/og?logo=%logo&title=%title&description=%description', // [!code focus]
  title: 'Viem'
})
```

You can also specify an object for the `ogImageUrl` with paths as keys.

This will render a different OG image depending on the path the user is on.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  ogImageUrl: { // [!code focus]
    '/': 'https://vocs.dev/og-image.png', // [!code focus]
    '/docs': 'https://vocs.dev/api/og?logo=%logo&title=%title&description=%description', // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

### rootDir

- **Type:** `string`
- **Default:** `"docs"`

Documentation root directory. Can be an absolute path, or a path relative from the location of the config file itself.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  rootDir: 'site', // [!code focus]
  title: 'Viem'
})
```

### search

- **Type:** `Search`

Search configuration. Accepts [`MiniSearch` options](https://lucaong.github.io/minisearch/types/MiniSearch.SearchOptions.html).

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  search: { // [!code focus]
    boostDocument(documentId) { // [!code focus]
      return documentId === '/core' ? 2 : 1 // [!code focus]
    } // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

### sidebar

- **Type:** `Sidebar`

Navigation displayed on the sidebar.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  sidebar: [ // [!code focus]
    { // [!code focus]
      text: 'Getting Started', // [!code focus]
      link: '/docs', // [!code focus]
    }, // [!code focus]
    { // [!code focus]
      text: 'API', // [!code focus]
      collapsed: true, // [!code focus]
      items: [ // [!code focus]
        { // [!code focus]
          text: 'Config', // [!code focus]
          link: '/docs/api/config', // [!code focus]
        }, // [!code focus]
      ], // [!code focus]
    } // [!code focus]
  ], // [!code focus]
  title: 'Viem'
})
```

You can also specify an object for the sidebar with paths as keys and sidebar items as values.

This will render a different sidebar depending on the path the user is on.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  sidebar: { // [!code focus]
    '/guide': [{ // [!code focus]
      text: 'Getting Started', // [!code focus]
      link: '/guide', // [!code focus]
    }], // [!code focus]
    '/api': [{ // [!code focus]
      text: 'Config', // [!code focus]
      link: '/api/config', // [!code focus]
    }], // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

### socials

- **Type:** `Socials`

Social links displayed in the top navigation.

Supports **Discord**, **GitHub**, **Telegram**, **Bluesky**, **X**, and **Warpcast**.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  socials: [ // [!code focus]
    { // [!code focus]
      icon: 'github', // [!code focus]
      link: 'https://github.com/wevm/viem', // [!code focus]
    }, // [!code focus]
    { // [!code focus]
      icon: 'x', // [!code focus]
      link: 'https://twitter.com/wevm_dev', // [!code focus]
    }, // [!code focus]
  ], // [!code focus]
  title: 'Viem'
})
```

### sponsors

- **Type:** `SponsorSet`

Set of sponsors to display on MDX directives and (optionally) the sidebar.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  sponsors: [ // [!code focus]
    { // [!code focus]
      name: 'Collaborator', // [!code focus]
      height: 120, // [!code focus]
      items: [ // [!code focus]
        [ // [!code focus]
          { // [!code focus]
            name: 'Paradigm', // [!code focus]
            link: 'https://paradigm.xyz', // [!code focus]
            image: // [!code focus]
              'https://raw.githubusercontent.com/wevm/.github/main/content/sponsors/paradigm-light.svg', // [!code focus]
          }, // [!code focus]
        ], // [!code focus]
      ], // [!code focus]
    }, // [!code focus]
    { // [!code focus]
      name: 'Large Enterprise', // [!code focus]
      height: 60, // [!code focus]
      items: [ // [!code focus]
        [ // [!code focus]
          { // [!code focus]
            name: 'WalletConnect', // [!code focus]
            link: 'https://walletconnect.com', // [!code focus]
            image: // [!code focus]
              'https://raw.githubusercontent.com/wevm/.github/main/content/sponsors/walletconnect-light.svg', // [!code focus]
          }, // [!code focus]
          { // [!code focus]
            name: 'Stripe', // [!code focus]
            link: 'https://www.stripe.com', // [!code focus]
            image: // [!code focus]
              'https://raw.githubusercontent.com/wevm/.github/main/content/sponsors/stripe-light.svg', // [!code focus]
          }, // [!code focus]
        ], // [!code focus]
      ], // [!code focus]
    }, // [!code focus]
  ], // [!code focus]
  title: 'Viem'
})
```

### theme

- **Type:** `Theme`

Theme configuration.

[Read more about theming](/docs/guides/theming).

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  theme: { // [!code focus]
    accentColor: '#ff0000', // [!code focus]
    variables: { // [!code focus]
      color: { // [!code focus]
        background: { // [!code focus]
          light: 'white', // [!code focus]
          dark: 'black' // [!code focus]
        } // [!code focus]
      } // [!code focus]
    } // [!code focus]
  }, // [!code focus]
  title: 'Viem'
})
```

::::note
:::details[Theme Reference]
```ts
type Theme = {
  accentColor?: string
  colorScheme?: 'dark' | 'light' | 'system'
  variables?: {
    borderRadius?: {
      '0': string,
      '2': string,
      '4': string,
      '8': string,
    },
    color?: {
      white: { light: string, dark: string },
      black: { light: string, dark: string },
      background: { light: string, dark: string },
      background2: { light: string, dark: string },
      background3: { light: string, dark: string },
      background4: { light: string, dark: string },
      background5: { light: string, dark: string },
      backgroundAccent: { light: string, dark: string },
      backgroundAccentHover: { light: string, dark: string },
      backgroundAccentText: { light: string, dark: string },
      backgroundBlueTint: { light: string, dark: string },
      backgroundDark: { light: string, dark: string },
      backgroundGreenTint: { light: string, dark: string },
      backgroundGreenTint2: { light: string, dark: string },
      backgroundIrisTint: { light: string, dark: string },
      backgroundRedTint: { light: string, dark: string },
      backgroundRedTint2: { light: string, dark: string },
      backgroundYellowTint: { light: string, dark: string },
      border: { light: string, dark: string },
      border2: { light: string, dark: string },
      borderAccent: { light: string, dark: string },
      borderBlue: { light: string, dark: string },
      borderGreen: { light: string, dark: string },
      borderIris: { light: string, dark: string },
      borderRed: { light: string, dark: string },
      borderYellow: { light: string, dark: string },
      heading: { light: string, dark: string },
      shadow: { light: string, dark: string },
      text: { light: string, dark: string },
      text2: { light: string, dark: string },
      text3: { light: string, dark: string },
      text4: { light: string, dark: string },
      textAccent: { light: string, dark: string },
      textAccentHover: { light: string, dark: string },
      textBlue: { light: string, dark: string },
      textBlueHover: { light: string, dark: string },
      textGreen: { light: string, dark: string },
      textGreenHover: { light: string, dark: string },
      textIris: { light: string, dark: string },
      textIrisHover: { light: string, dark: string },
      textRed: { light: string, dark: string },
      textRedHover: { light: string, dark: string },
      textYellow: { light: string, dark: string },
      textYellowHover: { light: string, dark: string },

      blockquoteBorder: { light: string, dark: string },
      blockquoteText: { light: string, dark: string },
      codeBlockBackground: { light: string, dark: string },
      codeCharacterHighlightBackground: { light: string, dark: string },
      codeHighlightBackground: { light: string, dark: string },
      codeHighlightBorder: { light: string, dark: string },
      codeInlineBackground: { light: string, dark: string },
      codeInlineBorder: { light: string, dark: string },
      codeInlineText: { light: string, dark: string },
      codeTitleBackground: { light: string, dark: string },
      dangerBackground: { light: string, dark: string },
      dangerBorder: { light: string, dark: string },
      dangerText: { light: string, dark: string },
      dangerTextHover: { light: string, dark: string },
      hr: { light: string, dark: string },
      infoBackground: { light: string, dark: string },
      infoBorder: { light: string, dark: string },
      infoText: { light: string, dark: string },
      infoTextHover: { light: string, dark: string },
      lineNumber: { light: string, dark: string },
      link: { light: string, dark: string },
      linkHover: { light: string, dark: string },
      noteBackground: { light: string, dark: string },
      noteBorder: { light: string, dark: string },
      noteText: { light: string, dark: string },
      successBackground: { light: string, dark: string },
      successBorder: { light: string, dark: string },
      successText: { light: string, dark: string },
      successTextHover: { light: string, dark: string },
      tableBorder: { light: string, dark: string },
      tableHeaderBackground: { light: string, dark: string },
      tableHeaderText: { light: string, dark: string },
      tipBackground: { light: string, dark: string },
      tipBorder: { light: string, dark: string },
      tipText: { light: string, dark: string },
      tipTextHover: { light: string, dark: string },
      warningBackground: { light: string, dark: string },
      warningBorder: { light: string, dark: string },
      warningText: { light: string, dark: string },
      warningTextHover: { light: string, dark: string },
    },
    content: {
      horizontalPadding: string,
      verticalPadding: string,
      width: string,
    },
    fontFamily: {
      default: string,
      mono: string,
    },
    fontSize: {
      root: string,
      '9': string,
      '11': string,
      '12': string,
      '13': string,
      '14': string,
      '15': string,
      '16': string,
      '18': string,
      '20': string,
      '24': string,
      '32': string,
      h1: string,
      h2: string,
      h3: string,
      h4: string,
      h5: string,
      h6: string,
      code: string,
      codeBlock: string,
      lineNumber: string,
      subtitle: string,
      th: string,
      td: string,
    },
    fontWeight: {
      regular: string,
      medium: string,
      semibold: string,
    },
    lineHeight: {
      code: string,
      heading: string,
      listItem: string,
      outlineItem: string,
      paragraph: string,
    },
    space: {
      '0': string,
      '1': string,
      '2': string,
      '3': string,
      '4': string,
      '6': string,
      '8': string,
      '12': string,
      '14': string,
      '16': string,
      '18': string,
      '20': string,
      '22': string,
      '24': string,
      '28': string,
      '32': string,
      '40': string,
      '44': string,
      '48': string,
      '56': string,
      '64': string,
      '72': string,
      '80': string,
    }
  }
}
```
:::
::::

### title

- **Type:** `string`
- **Default:** `"Docs"`

Documentation title.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  title: 'Viem' // [!code focus]
})
```

### titleTemplate

- **Type:** `string`
- **Default:** `"%s – Docs"`

Template for the page title.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  title: 'Viem',
  titleTemplate: '%s – Viem' // [!code focus]
})
```

### topNav

- **Type:** `TopNav`

Navigation displayed on the top.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  title: 'Viem',
  topNav: [ // [!code focus]
    { text: 'Guide & API', link: '/docs/getting-started', match: '/docs' }, // [!code focus]
    { text: 'Blog', link: '/blog' }, // [!code focus]
  ] // [!code focus]
})
```

### twoslash

- **Type:** `Twoslash`

TwoSlash configuration.

```tsx twoslash
import { defineConfig } from 'vocs'

export default defineConfig({
  title: 'Viem',
  twoslash: { // [!code focus]
    compilerOptions: { // [!code focus]
      strict: true, // [!code focus]
    } // [!code focus]
  } // [!code focus]
})
```

### vite

- **Type:** `Vite.UserConfig`

Vite configuration. [See more.](https://vitejs.dev/config/)

The config you specified will be merged with Vocs's Vite config. [See more.](https://github.com/wevm/vocs/blob/main/src/vite/vite.config.ts)

```tsx twoslash
// @noErrors
import { defineConfig } from 'vocs'
import tsconfigPaths from 'vite-tsconfig-paths' // [!code focus]

export default defineConfig({
  title: 'Viem',
  vite: { // [!code focus]
    build: { // [!code focus]
      minify: 'terser' // [!code focus]
    }, // [!code focus]
    plugins: [tsconfigPaths()] // [!code focus]
  } // [!code focus]
})
```
